/*
 * Copyright © 2017 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
*/
$element-selected-color: #dbdbdb;
$border-color: #cccccc;
$dark-border-color: #999999;
$option-hover-bg-color: #eeeeee;

@import '../../../../styles/variables.scss';

.columns-tab {
  height: 100%;

  .columns-tab-heading {
    height: 40px;
    display: flex;
    align-items: center;
    padding: 5px 0 5px 10px;
    border-bottom: 1px solid $border-color;

    #toggle-all-dropdown {
      cursor: pointer;
      margin-right: 10px;

      &.expanded {
        background-color: $element-selected-color;
      }
    }

    .search-box {
      position: relative;
      flex: 1;

      .form-control {
        display: inline-block;
        border-radius: 13px;
        height: 26px;

        width: 100%;
        padding-right: 25px;
      }

      .fa {
        position: absolute;
        right: 9px;
        top: 5px;
        color: $dark-border-color;
        font-size: 13px;
        line-height: 1.25;
        &.fa-times-circle {
          cursor: pointer;
        }
      }
    }

  }

  .columns-list {
    height: calc(100% - 40px);
    overflow-y: auto;

    .table {
      background: transparent;
      thead {
        tr {
          th {
            border-top: 0;
          }
        }
      }
      tbody {
        tr {
          cursor: pointer;
          td {
            &:nth-child(2),
            &:nth-child(3) {
              width: 5%;
            }
            &:nth-child(4) {
              width: 70%;
              max-width: 250px;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            &:nth-child(5) {
              width: 10%;
            }
          }
          &.column-tab-details {
            background: $element-selected-color;
            border-left: 3px solid;
            .table {
              background: transparent;
            }
          }
          &.selected {
            background-color: $element-selected-color;
          }
        }
      }
      &.table-sm {
        td,
        th {
          color: #373a3c;
          padding: 0.3rem;
        }
      }
    }
  }

  &.empty-search-container {
    height: auto;
  }

  .empty-search {
    font-size: 18px;
    font-weight: 500;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25vh;
    max-width: 80%;
    word-wrap: break-word;

    hr {
      color: #999999;
      background-color: #999999;
    }
    span {
      font-size: 14px;
    }
    ul {
      padding: 0;
      list-style: none;
      font-size: 14px;
      .link-text {
        cursor: pointer;
        color: $cdap-orange;
      }
    }
  }
}
